<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  
  <title> 注册 </title> 
  <link rel="stylesheet" href="style/css/base.css"  /> 
  <link rel="stylesheet" href="style/css/login.css"  /> 

  <script  type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script> 


  <!-- 验证码 -->
  <style>
  		.verify{
			width: 95px;
			position: absolute;
			right: 0;
			top: 0px;
			cursor: pointer;
			height: 46px;
			font-size: 14px;
			text-align: center;
			line-height: 46px; 
			background-color: rgb(50,165,231);
			color: black;
		}
		::-webkit-scrollbar{
			display:none;
		}
  </style>
 
 
 
 </head> 
 <body> 
  <div id="content" class="content"> 

  
   <div class="banner-box"> 
    <form id="mainForm" class="main-form" enctype="application/x-www-form-urlencoded" novalidate="novalidate"> 
		 <div class="tab-title"> 
		  <a class="linkAGray" id="toAccountLogin" href="login">账号登录</a>
		  <span class="register-line"></span> 
		  <a class="linkABlue" id="toVCodeLogin" href="register">账号注册</a>
		 </div> 
	
		 <div id="errorMsg" class="tip-box visiblility-hidden"> 
		  <i class="err-ico"></i> 
		  <span class="tip-font" id="tipMsg" >请填写完整的注册信息</span> 
		  <span id="closeErrorMsg" class="close-ico"></span>
		 </div>

		 
		 <div class="normalInput cycode-box fieldInput">
		  <div class="cycode-selectbox"> 
		   <input class="ipt-account inp-focus" name="username" id="username" maxlength="50" placeholder="用户名"
				  autocomplete="off" onfocus="closeErrorMsg()" />
		    
		  </div> 
		 </div>
		<div class="normalInput cycode-box fieldInput">
			<div class="cycode-selectbox">
				<input class="ipt-account inp-focus" name="username" id="phone" maxlength="50" placeholder="手机号"
					   autocomplete="off" onfocus="closeErrorMsg()" />
			</div>
		</div>
		<div class="normalInput fieldInput">
			 <input type="password" class="inp-focus" name="password" id="password" maxlength="16" autocomplete="off"
					placeholder="密码" onfocus="closeErrorMsg()"  />
		 </div>

		<div class="normalInput fieldInput">
			<input type="password" class="inp-focus" name="password" id="confirm-password" maxlength="16"
				   autocomplete="off"
				   placeholder="确认密码" onfocus="closeErrorMsg()"  />
		</div>

		<a id="register" class="fullBtnBlue">注册</a>
    </form>
   </div> 
  </div> 




  <script>
  	//点击注册事件
  	$("#register").click(function(){  
		var username = $("#username").val();
		var phone = $("#phone").val();
		var password = $("#password").val(); //输入的验证码
		var confirmPassword = $("#confirm-password").val(); //输入的验证码

		if( username=="" || password=="" || phone=="" || confirmPassword==""){
			var obj = document.getElementById("errorMsg");
			$("#tipMsg").html("请填写完整的注册信息！");
			obj.setAttribute("class", "tip-box visiblility-show");
			return ;
		}

		var phoneRegex = /^1\d{10}$/;
		if (!phoneRegex.test(phone)) {
			var obj = document.getElementById("errorMsg");
			$("#tipMsg").html("请输入有效的手机号码！");
			obj.setAttribute("class", "tip-box visiblility-show");
			return;
		}

		if(password != confirmPassword){
			var obj = document.getElementById("errorMsg");
			$("#tipMsg").html("两次输入密码不一致！");
			obj.setAttribute("class", "tip-box visiblility-show");
			return ;
		}

		//发送ajax请求
		$.ajax({
			type: 'POST',
			url: 'register',
			data: 'username='+username+'&phone='+phone+'&password='+password,
			dataType: 'JSON',
			success: function(data){
				if (data.code == 0) {
					console.log(data);
					if (data.msg != '') {
						var obj = document.getElementById("errorMsg");
						$("#tipMsg").html(data.msg);
						obj.setAttribute("class", "tip-box visiblility-show");
					} else {
						window.location.href = 'login';
					}
				}
			},
		});

	});  

  	//点击错误信息关闭按钮
  	$("#closeErrorMsg").click(function(){
			var obj = document.getElementById("errorMsg");
			obj.setAttribute("class", "tip-box visiblility-hidden");
  	});

  	//关闭错误提示
  	function closeErrorMsg(){
  			var obj = document.getElementById("errorMsg");
			obj.setAttribute("class", "tip-box visiblility-hidden");
  	}


  </script>
 </body>
</html>
